<!DOCTYPE HTML>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
<meta charset=utf-8>
<link rel="shortcut icon" href="${resource(dir:'images',file:'favicon.ico')}" />

<title><g:layoutTitle default="BidHub" />
</title>

<!-- this is the javascript allowing html5 to run in older browsers -->
<script src="${resource(dir:'js',file:'modernizr-1.7.min.js')}"></script>

<link rel="stylesheet" type="text/css"
	href="${resource(dir:'css',file:'reset.css')}" media="screen"
	title="html5doctor.com Reset Stylesheet" />

<!-- in the CSS3 stylesheet you will find examples of some great new features CSS has to offer -->
<link rel="stylesheet" type="text/css"
	href="${resource(dir:'css',file:'css3.css')}" media="screen" />

<!-- general stylesheet contains some default styles, you do not need this, but it helps you keep a uniform style -->
<link rel="stylesheet" type="text/css"
	href="${resource(dir:'css',file:'general.css')}" media="screen" />

<!-- grid's will help you keep your website appealing to your users, view 52framework.com website for documentation -->
<link rel="stylesheet" type="text/css"
	href="${resource(dir:'css',file:'grid_1200px.css')}" media="screen" />

<!-- special styling for forms, this can be used as a form framework on its own -->
<link rel="stylesheet" type="text/css"
	href="${resource(dir:'css',file:'forms.css')}" media="screen" />
	
<!-- special styling for messages and errors -->
<link rel="stylesheet" type="text/css"
	href="${resource(dir:'css',file:'messages_errors.css')}" media="screen" />
	
<!-- special styling for the header -->
<link rel="stylesheet" type="text/css"
	href="${resource(dir:'css',file:'header.css')}" media="screen" />
	
<!-- special styling for the header -->
<link rel="stylesheet" type="text/css"
	href="${resource(dir:'css',file:'buttons.css')}" media="screen" />

<!-- the following style is for demonstartion purposes only and is not needed for anything but inspiration -->
<style>


#styled {
	margin-top: 20px;
}

.group {
	padding: 5px;
	background-color: #eee;
	border: 1px dashed #ccc;
	list-style: none;
	margin: 0px;
	margin-bottom: 5px;
}

.group a {
	font-size: 1.2em;
}

.group p {
	margin-bottom: 5px;
}

.group li {
	margin-bottom: 5px;
}

#css3 div>div {
	margin: 0px 0px 50px 0px;
	padding: 6px;
	border: 1px solid #eee;
}

#grid div {
	text-align: center;
}

#grid div>.col {
	border-bottom: 1px solid #ccc;
	padding: 10px 0px;
	outline: 1px solid #eee;
}

h2 {
	border-bottom: 1px dashed #ccc;
	margin-top: 15px;
}

.documentation {
	display: block;
	background-color: #eee;
	padding: 6px 13px;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #666;
	text-align: right;
	text-shadow: -1px -1px 0px #fff;
}

footer {
	text-align: center;
	color: #666;
	font-size: 0.9em;
	padding: 4px 0px;
}

.report_bugs {
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	transform: rotate(-90deg);
	position: absolute;
	left: -45px;
	top: 200px;
	background-color: #f00;
	color: #fff;
	z-index: 99;
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3 );
	text-decoration: none;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1.2em;
	padding: 2px 5px;
}


</style>
<!--[if IE]> <style> .report_bugs {left:0px;} </style>	<![endif]-->
<g:layoutHead />
</head>
	
<body>
	<header class="gradient">
			  <g:render template="/layouts/header"/> 
			  		<div class="clear"></div>
			<!-- clear -->
		</header>
	<a href="http://code.google.com/p/bidhub/issues/list"
		class="report_bugs" target="_blank">REPORT BUGS</a>

	
	<!-- row -->

	<!-- this section shows you most of the styled elements from the general stylesheet -->
	
	<section class="row" id="styled">
		<!-- flash message -->
		<g:if test="${flash.message}">
				
			</div>
		</g:if>
				
		<div class="col_12 col">
		
		<g:layoutBody />
		</div>

		<!-- Sidebar with login -->
		<div class="col_4 col"
			style="border-left: 2px solid #ccc;
			vertical-align: middle;
			border-right: 2px solid #ccc;
			padding: 10px;
			margin-left: 10px;
			margin-right: 10px; 
			-moz-box-shadow: 0 0 20px #FFFFFF inset,
							10px 7px 15px #FFFFFF,
							-10px 7px 15px #FFFFFF,
							-10px -7px 15px #99CCFF,
							10px -7px 15px #99CCFF;">
			

			<h2>Login</h2>
			<auth:loginControl />


			<h2>How To?</h2>
			<ul>
				<li><g:link controller="howto" action="howToReg">User registrieren</g:link>
				</li>
				<li><g:link controller="howto" action="howToUserdata">Userdaten bearbeiten</g:link>
				</li>
				<li><g:link controller="howto" action="howToAuction">Auktion erstellen</g:link>
				</li>
				<li><g:link controller="howto" action="howToBid">Gebot abgeben</g:link>
			
				</li>
			</ul>
		</div>
		<!-- col_4 -->
	</section>
	<!-- row -->



	<footer class="row">
	
		 <g:render template="/layouts/footer"/> 
		 <div class="clear"></div>
		 
	</footer>
</body>
</html>